<template>
  <div class="pages">
    <div class="gradient-background">
      <div class="loginBox _flex _justifyBetween _alignCenter">
        <div class="login-content">
          <div class="pagetitle">
            服务热线
           <!-- <span class="headTxt">96199</span>-->
          </div>
          <div class="login-date">
            <div @click.stop="showTime" class="time">
              <span>{{ timeTitle }}</span>
              <img src="~@/assets/liangweiyiduan/xia.png" alt />
            </div>
          </div>
        </div>
        <img src="~@/assets/index/head_img.png" class="top-img" />
      </div>
    </div>
    <div class="mian">
      <div class="tabBox"  style="padding: 0.1rem 0.3rem;">
        <div class="tabItem" style="padding: 0.1rem 0.35rem;" :class="{ tabActive: cityIndex == index }"
          v-for="(item, index) in localList" :key="index" @click="cityChange(index, item)">{{ item.value }}</div>
      </div>
      <div v-transfer-dom>
        <popup v-model="show">
          <div class="popup">
            <div>
              <div
                style=" display: flex;justify-content: space-between; align-items: center; border-bottom: 1px solid #F6F6F6;">
                <span style="color:#565656;font-size:0.28rem; padding: 0.2rem 0;">时间选择</span>
                <x-icon @click="closeX" type="ios-close-empty" size="30"></x-icon>
              </div>
              <div style="margin: 0.4rem 0;font-size: 0.26rem;display: flex;align-items: center;">
                <datetime v-model="timeValue" format="YYYY-MM-DD" :end-date="endDate" @on-change="timeschange">
                  {{ timeTitle2 }}
                </datetime>
                <x-icon type="ios-arrow-down" size="18"></x-icon>
              </div>
              <checker style="margin-bottom:0.24rem;font-size: 0.28rem;" v-model="time" radio-required
                default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                <checker-item v-for="(ite, index) in timeList" :key="index" :value="ite.key"
                  @on-item-click="onItemClick()">{{ ite.value }}</checker-item>
              </checker>
              <x-button @click.native="affirm"
                style="color:#FFFFFF; background:#4570A9; margin:0.6rem 0 0.6rem;">确认</x-button>
            </div>
          </div>
        </popup>
      </div>
      <!-- 统计 -->
      <div class="data-container">
        <div class="data-card">
          <div class="metric-label">呼入量</div>
            <div class="metric-value">{{formatMoney(staticForm.callinCount)}}</div>
        </div>
        <div class="data-card">
          <div class="metric-label">接听量</div>
            <div class="metric-value">{{formatMoney(staticForm.jtCount)}}</div>
        </div>
        <div class="vertical-divider"></div>
        <div class="data-card">
          <div class="metric-label">接通率</div>
            <div class="metric-value">{{staticForm.percent?staticForm.percent:'0%'}}</div>
        </div>
    </div>
      <!-- 呼入量 -->
      <div class="dataLi mg2">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">呼入量</span>
            </div>
          </div>
        </div>
        <total-echarts :formData='totalList' :time="affirmTime" style="margin-top:.4rem"
          @chooseDate='chooseDate'></total-echarts>
      </div>
      <!-- 接听内容 -->
      <div class="dataLi mg2">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">接听内容</span>
            </div>
          </div>
        </div>
        <jtnr-echarts :formData="jtnrForm"></jtnr-echarts>
        <div class="pd2">
            <h4>业务排名</h4>
            <ywpm-echarts :formData='ywpmList' ></ywpm-echarts>
          </div>
      </div>
      <!-- 接听方式 -->
      <div class="dataLi mg2">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">接听方式</span>
            </div>
          </div>
        </div>
        <jtfs-echarts :formData='jtfsForm'></jtfs-echarts>

      </div>
      <!-- 接通率 -->
      <div class="dataLi mg2">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">接通率</span>
            </div>
          </div>
        </div>
        <van-tabs color="#5087EC" v-model="jtlActive" title-active-color="#5087EC" @change="changeJtl" >
          <van-tab v-for="(item,index) in jtlArr"   :key="index" :title="item.value">
          </van-tab>
        </van-tabs>
        <jtl-echarts v-loading='jtLoading' v-if="jtlForm" :form='jtlForm'></jtl-echarts>
      </div>
      <!-- 话务量排名 -->
      <div class="dataLi mg2">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">话务量排名</span>
            </div>
          </div>
        </div>
        <div >
            <h4 class="pd2">小组排名</h4>
            <hwl-table :formData='hwlList' :rankingType="'agent'" v-loading='hwlLoading'></hwl-table>
          </div>
          <div>
            <h4  class="pd2">客服人员排名</h4>
            <hwl-table :formData='hwlList1' :rankingType="'group'"  v-loading='hwlLoading'></hwl-table>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  TransferDom,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  XButton,
  Tab,
  TabItem
} from "vux";
import {formatMoney} from "@/utils/dateUtil.js";
import titleSty from "../../onLineService/components/titleSty.vue";
import totalEcharts from "../components/totalEcharts.vue";
import jtnrEcharts from "../components/jtnrEcharts.vue";
import jtfsEcharts from "../components/jtfsEcharts.vue";
import jtlEcharts from "../components/jtlEcharts.vue";
import hwlTable from "../components/hwlTable.vue";
import ywpmEcharts from "../components/ywpmEcharts.vue";

export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    XButton,
    titleSty,
    totalEcharts,
    jtnrEcharts,
    jtfsEcharts,
    jtlEcharts,
    hwlTable,
    ywpmEcharts,
    Tab,
    TabItem
  },
  data() {
    return {
      timeTitle: this.getYesterday(),
      time: "D", //时间
      myType: "D",
      show: false, //弹窗
      cityIndex: 0,
      timeList: [
        {
          key: "D",
          value: "当日"
        },
        {
          key: "W",
          value: "近7日"
        },
        {
          key: "M",
          value: "近30日"
        },
        {
          key: "Y",
          value: "本年"
        }
      ],
      startTime: "", //开始时间
      endTime: "", //结束时间
      starttimeRi: "", //结束时间日期
      endtimeRi: "", //开始时间日期
      affirmTime: "D", //确定之后的时间
      affirmStartTime: "", //确定之后的开始时间
      affirmEndTime: "", //确定之后的结束时间
      againTime: "",
      touchedTime: "",
      dqywSelect: false,
      value1: "",
      staticForm: {}, //顶部统计数据


      localList: [
        {
          key: "",
          value: "全部地区"
        },
        {
          key: "002202",
          value: "沈阳"
        },
        {
          key: "002200",
          value: "葫芦岛"
        },
        {
          key: "002201",
          value: "朝阳"
        }
      ],
      local: "",
//       ETC业务
// 稽核业务
// 救援业务
// 路况查询
// 其他业务
// 投诉举报
// 应急防控物资
// ETC银行业务
jtlName: "",
      jtlArr:[
        {
          key: "0",
          value: "全部业务"
        },
        {
          key: "2",
          value: "ETC业务"
        },
        {
          key: "1",
          value: "稽核业务"
        },
        {
          key: "3",
          value: "救援业务"
        },
        {
          key: "4",
          value: "路况查询"
        },
        {
          key: "5",
          value: "其他业务"
        },
        {
          key: "6",
          value: "投诉举报"
        },
        {
          key: "7",
          value: "应急防控物资"
        },
        {
          key: "8",
          value: "ETC银行业务"
        }
      ],
      jtlActive:'0',
      value2: "0",
      ywSelList: [
        {
          key: "0",
          value: "全部业务"
        },
        {
          key: "2",
          value: "ETC"
        },
        {
          key: "1",
          value: "路况"
        }
      ],
      callSelect: "0",
      totalForm: {},
      totalLoading: false,
      totalList: [],
      jtLoading: false,
      jtnrForm: [],
      jtfsForm: [],
      jtlForm: [],
      ywpmList:[],
      paramsStartTime: this.getYesterday() + ' 00:00:00',
      paramsEndTime: this.getYesterday() + " 23:59:59",
      rankingType: "agent",
      hwlLoading: false,
      hwlList: [],
      hwlList1: [],
      timeCF: false,
      timeTitle2: this.getYesterday(),
      timeValue: '',
      currentTime: '',
      endDate: this.getYesterday()
    };
  },
  created() {
    this.timeId = setInterval(() => {
      if (this.type == "Z" && (!this.affirmStartTime || !this.affirmEndTime)) {
        return false
      } else {
        this.getData(true)
      }
    }, 50000)
  },
  mounted(flag) {
    this.getData(flag);
  },
  destroyed() {
    clearInterval(this.timeId)
  },
  methods: {
    formatMoney,
    /* 城市选择 */
    cityChange(index, e) {
      this.cityIndex = index;
      this.local = e.key;
      this.affirm()
    },
    getData(flag) {
      this.getStaticData(flag);
      this.getJtnrData(flag);
      this.getJtfsData(flag);
      this.getYwpmData(flag);
      this.getHwlData(flag);
      this.gettotalData(flag);
      this.changeJtl();
      // this.getjtDate(flag);
      // this.gethwlData(flag, "group");
      // this.gethwlData(flag, "agent");
    },
    showScreen() {
      this.value1 = this.local;
      this.value2 = this.callSelect;
      this.dqywSelect = true;
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
    //展示当天时间
    getYesterday() {
      //获取当天
      let currentDate = new Date().getTime();
      let prevTime = currentDate;
      let prevDate = new Date(prevTime);
      const time = str => {
        if (str >= 10) {
          return str;
        } else {
          return "0" + str;
        }
      };
      let yesterday =
        time(new Date(prevDate).getFullYear()) +
        "-" +
        time(new Date(prevDate).getMonth() + 1) +
        "-" +
        time(new Date(prevDate).getDate());
      return yesterday;
    },
    //显示底部弹窗
    showTime() {
      this.show = true;
      this.time = this.affirmTime;
      this.startTime = this.affirmStartTime;
      this.endTime = this.affirmEndTime;
    },
    //关闭底部弹窗
    closeX() {
      this.show = false;
    },
    //日 周 月 点击事件
    onItemClick() {
      this.startTime = "";
      this.endTime = "";
    },
    //近N天
    getDayN(day, currentTime) {
      if (currentTime) {
        var today = new Date(currentTime);
      } else {
        var today = new Date();
      }
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + (tMonth >= 10 ? tMonth : '0' + tMonth) + "-" + (tDate >= 10 ? tDate : '0' + tDate);
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = month;
      }
      return m;
    },
    localItemClick() { },
    ywItemClick() { },
    timeschange() {
      this.currentTime = this.timeValue.replace(/-/g, '/')
      this.timeTitle2 = this.timeValue
    },
    //确定
    affirm() {
      clearInterval(this.timeId)
      this.timeId = setInterval(() => {
        if (this.type == "Z" && (!this.affirmStartTime || !this.affirmEndTime)) {
          return false
        } else {
          this.getData(true)
        }
      }, 50000)
      if (this.time == "Z" && (!this.startTime || !this.endTime)) return;
      this.show = false;
      this.affirmTime = this.time;
      // this.affirmEndTime = this.endTime;
      // this.affirmStartTime = this.startTime;
      // this.paramsStartTime = this.affirmStartTime + ":00" + ":00";
      // this.paramsEndTime = this.affirmEndTime + ":00" + ":00";
      if (this.affirmTime == "D") {
        // this.timeTitle = this.getYesterday();
        this.paramsStartTime = this.timeTitle2 + ' 00:00:00'
        this.paramsEndTime = this.timeTitle2 + " 23:59:59"
        this.timeTitle = this.timeTitle2;
      }
      if (this.affirmTime == "W") {
        // this.timeTitle = "本周";
        this.paramsStartTime = this.getDayN(-6, this.currentTime) + ' 00:00:00'
        this.paramsEndTime = this.timeTitle2 + ' 00:00:00'
        // console.log(this.getDayN(-6, this.currentTime))
        this.timeTitle = this.getDayN(-6, this.currentTime) + " " + " " + this.timeTitle2;
      }
      if (this.affirmTime == "M") {
        // this.timeTitle = "本月";
        this.paramsStartTime = this.getDayN(-29, this.currentTime) + ' 00:00:00'
        this.paramsEndTime = this.timeTitle2 + ' 00:00:00'
        // console.log(this.getDayN(-29, this.currentTime))
        this.timeTitle = this.getDayN(-29, this.currentTime) + " " + " " + this.timeTitle2;
      }
      if (this.affirmTime == "Y") {
        // this.timeTitle = "本年";
        this.paramsStartTime = new Date().getFullYear() + '-01-01' + ' 00:00:00'
        this.paramsEndTime = this.getYesterday() + ' 00:00:00'
        // this.paramsStartTime = ''
        // this.paramsEndTime = ''
        this.timeTitle = new Date().getFullYear() + '-01-01' + " " + " " + this.getYesterday();
      }
      if (this.affirmTime == "Z") {
        // this.timeTitle = this.startTime.replace(/-/g, ".") + "-" + this.endTime.replace(/-/g, ".")
        this.timeTitle = this.starttimeRi + " " + " " + this.endtimeRi;
      }
      this.myType = this.affirmTime;
      this.getData();
    },
    async gettotalData(flag) {
      // let endTime = this.paramsEndTime ? this.paramsEndTime : "";
      // let curdate = new Date();
      // let y = (curdate.getFullYear() >= 10 ? '' : '0') + curdate.getFullYear();
      // let M = (curdate.getMonth() >= 9 ? '' : '0') + (curdate.getMonth() + 1);
      // let d = (curdate.getDate() >= 10 ? '' : '0') + curdate.getDate();
      // let h = (curdate.getHours() >= 10 ? '' : '0') + curdate.getHours();
      // let m = (curdate.getMinutes() >= 10 ? '' : '0') + curdate.getMinutes();
      // let s = (curdate.getSeconds() >= 10 ? '' : '0') + curdate.getSeconds();
      // if (endTime && endTime.split(' ')[0] == (y + '-' + M + '-' + d)) {
      //   endTime = endTime.split(' ')[0] + " " + h + ":" + m + ":" + s;
      // }
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: endTime,
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/wholeCallInGroup', params)
      this.totalList = data.list;
    },
    async getjtDate(flag) {
      if (!flag) {
        this.jtLoading = true;
      }
      // 给后台的请求参数
      // let data = {
      //   startTime: this.paramsStartTime ? this.paramsStartTime : "",
      //   endTime: this.paramsEndTime ? this.paramsEndTime : "",
      // };
      let params = {
        startTime: "2024-09-01 00:00:00",
        endTime: "2024-09-01 23:59:59",
        parent: "002200"
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/wholeCallInGroup', params)
      this.jtLoading = false;
      this.jtnrForm = data;
    },




/*  新接口开始===================================== */


    /* 顶部统计 */
    async getStaticData(flag)  {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/wholeCallInCount', params)
      console.log(data,'顶部统计');
      this.staticForm = data;
    },
    /* 接听内容 */
    async getJtnrData(flag) {
      if (!flag) {
        this.hwlLoading = true;
      }
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      // let params = {
      //   startTime: "2024-09-01 00:00:00",
      //   endTime: "2024-09-01 23:59:59",
      //   "parent": '002200'
      // };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/answerCallGroup', params)
        console.log(data.list,'接听内容');
        let otherCount = []
        let ectCount = []
        let date = []
        let jtnrData = []
        for (let row in data.list){
          date.push(data.list[row].date)
          otherCount.push(data.list[row].otherCount)
          ectCount.push(data.list[row].ectCount)
        }
        jtnrData.otherCount = otherCount
        jtnrData.ectCount = ectCount
        jtnrData.date = date
        this.jtnrForm = jtnrData
        this.hwlLoading = false;
    },
    /* 接听方式 */
    async getJtfsData(flag) {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getAgentAndRobotCount', params)
        console.log(data.list,'接听方式');
        let rgjtCount = []
        let jqrCount = []
        let ivrCount = []
        let date = []
        let jtfsData = []
        for (let row in data.list){
          date.push(data.list[row].date)
          jqrCount.push(data.list[row].jqrCount)
          rgjtCount.push(data.list[row].rgjtCount)
          ivrCount.push(data.list[row].ivrCount)
        }
        jtfsData.rgjtCount = rgjtCount
        jtfsData.ivrCount = ivrCount
        jtfsData.jqrCount = jqrCount
        jtfsData.date = date
        this.jtfsForm = jtfsData
    },
    /* 接通率 */
    changeJtl(e) {
      console.log(this.jtlActive);
      this.jtlName =  this.jtlArr[this.jtlActive].value;
      if(this.jtlArr[this.jtlActive].value == '全部业务'){
        this.jtlName = ''
      }
      console.log(this.jtlName);
      this.getJtlData();
    },
    async getJtlData(flag)  {
      if (!flag) {
        this.jtLoading = true;
      }
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        ivrKey: this.jtlName,
        parent: this.local
      };

      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getCallInPercent', params)
      console.log(data,'接通率');
      let percent = []
      let date = []
      let jtlData = []
      for (let row in data.list){
        date.push(data.list[row].date)
        percent.push(data.list[row].percent.replace('%',''))
      }
      jtlData.percent = percent
      jtlData.date = date
      this.jtlForm = jtlData;
      this.jtLoading = false;
    },

     /* 业务排名 */
    async getYwpmData(flag)  {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getBusinessRank', params)
        console.log(data,'业务排名');
        let stCount = []
        let type = []
        let ywpmData = []
        for (let row in data.list){
          type.push(data.list[row].type)
          stCount.push(data.list[row].stCount)
        }
        ywpmData.stCount = stCount
        ywpmData.type = type
        this.ywpmList = ywpmData;
    },
     /* 话务量排名 */
    async getHwlData(flag)  {
      if (!flag) {
        this.hwlLoading = true;
      }
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getAnswerCallGroupRank', params)
      const res = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getAnswerCallAgentRank', params)
        console.log(data,'小组排名');
        this.hwlList =  data.list;
        this.hwlList1 =  res.data.list;
        console.log(res,'客服排名');
        this.hwlLoading = false;
    },




/*  新接口结束===================================== */

    chooseDate(val) {
      // console.log(val)
      if (this.touchedTime != val) {
        if (val.length < 4 && val.indexOf("月") == -1) {
          let nowT = new Date().getHours();
          if (Number(val) <= nowT) {
            this.timeCF = true;
          } else {
            this.timeCF = false;
          }
        } else if (val.length > 10) {
          this.timeCF = true;
        } else if (val.indexOf("月") != -1 && val.length < 4) {
          this.timeCF = true;
        } else {
          let getTi = new Date(val).getTime();
          let nowT = new Date().getTime();
          if (getTi <= nowT) {
            this.timeCF = true;
          } else {
            this.timeCF = false;
          }
        }
        this.touchedTime = val;
      }
    },
    suerToTime() {
      clearInterval(this.timeId)
      if (this.againTime != this.touchedTime) {
        if (this.touchedTime.length < 4 && this.touchedTime.indexOf("月") == -1) {
          let dataStr =
            new Date().getFullYear() +
            "-" +
            (new Date().getMonth() + 1) +
            "-" +
            new Date().getDate();
          // console.log(dataStr);
          this.paramsStartTime = dataStr + " " + this.touchedTime + ":00:00";
          this.paramsEndTime = dataStr + " " + this.touchedTime + ":59:59";
        } else if (this.touchedTime.length > 10) {
          this.paramsStartTime = this.touchedTime + ":00:00";
          this.paramsEndTime = this.touchedTime + ":59:59";
        } else if (this.touchedTime.indexOf("月") != -1 && this.touchedTime.length < 4) {
          let timeStr = this.touchedTime.split("月")[0];
          this.paramsStartTime = this.getYesterday().split("-")[0] + "-" + timeStr + "-01 00:00:00"
          this.paramsEndTime = this.getYesterday().split("-")[0] + "-" + timeStr + "-31 23:59:59"
        } else {
          // console.log(this.touchedTime);
          this.paramsStartTime = this.touchedTime + " 00:00:00";
          this.paramsEndTime = this.touchedTime + " 23:59:59";
        }
        // console.log(this.paramsStartTime);
        // console.log(this.paramsEndTime);
        this.againTime = this.touchedTime;
        this.affirmTime = "Z";
        // this.getjtDate();
        this.gethwlData();
      }
    },
    clearTime() {
      this.affirm()
    },
    // 千分符
    formatQ(str) {
      if (!str) return;
      str = parseInt(str)
        .toString()
        .split(".");
      // // console.log("第一次处理后的num",str);
      str[0] = str[0].replace(new RegExp("(\\d)(?=(\\d{3})+$)", "ig"), "$1,");
      // // console.log("第一次处理后的num",str[0]);
      return str.join(".");
    }
  }
};
</script>

<style lang="less" scoped>
@import "~vux/src/styles/close.less";

.headTxt {
  font-size: 0.2rem;
  background: #B4FDFF;
  border-radius: 20px;
  color: #333;
  padding: 0 0.2rem;
}
   /* 基础容器样式 */
   .data-container {
            width: 100%;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            display: flex;
            align-items: center;
            height: 100px;
      margin-top: 20px;
        }

        /* 数据卡片公共样式 */
        .data-card {
            flex: 1;
            padding: 10px;
            text-align: center;
            transition: transform 0.3s ease;
            border-right:2px solid #F5F5F5 ;
        }
        .data-card:last-child{
          border-right:none;
        }
        /* 数据卡片悬停动画 */
        .data-card:hover {
            transform: translateY(-5px);
        }

        /* 数值显示样式 */
        .metric-value {
            color: #4CAF50; /* 使用Material Design标准绿色 */
            font-family: 'Segoe UI', Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;

        }
        /* 标签样式 */
        .metric-label {
            color: #212121;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
.zhineng {
  background: #5cdbd3;
  width: 0.1rem;
  height: 0.1rem;
}

.zhuanren {
  background: #7e6df5;
  width: 0.1rem;
  height: 0.1rem;
}

.bgfbdr {
  background-color: #fff;
  border-radius: 0.2rem;
}

.fz25 {
  font-size: 0.28rem;
}

.fz28 {
  font-size: 0.28rem;
}

.fz30 {
  font-size: 0.32rem;
}

.gray {
  color: #898989;
}

.blueC {
  color: #008dff;
}

.greenblueC {
  color: #00c2c3;
}

.orangeC {
  color: #fc8c00;
}

.redC {
  color: #d30000;
}

.greenC {
  color: #32a000;
}

.pd2 {
  padding: 0.2rem;
}

.mg2 {
  margin-top: 0.2rem;
}

.flr {
  float: right;
}

.fw600 {
  font-weight: bolder;
}

.totalNum {
  li {
    display: inline-block;
    width: 32%;
    text-align: center;
    padding: 0.2rem 0;
  }

  li:nth-child(2),
  li:nth-child(5) {
    border-left: 1px solid #f6f6f6;
    border-right: 1px solid #f6f6f6;
  }
}

.selet-box {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.selectDiv {
  position: absolute;
  z-index: 100;
  width: 100%;

  .mianCon {
    .titles {
      font-size: 0.25rem;
      color: #9b9b9b;
      padding: 0.2rem 0;
    }
  }
}

.bgCon {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.time {
  color: #fff;
  font-size: 0.28rem;
  padding: 0.32rem 0 0.32rem;

  img {
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
}

.totalEcharts {
  position: relative;
}

//弹窗
.vux-popup-dialog {
  background: #fff;
}

.popup {
  padding: 0 0.2rem 0;
  min-height: 4rem;
}

//时间单选
.vux-checker-box {
  display: flex;
}

.demo1-item {
  margin-right: 0.16rem;
  font-size: 0.26rem;
  width: 22%;
  text-align: center;
  border: 1px solid #ececec;
  padding: 0.1rem 0 0.16rem;
  color: #9b9b9b;
  border-radius: 2px;
}

.demo1-item-selected {
  background-color: #565656;
  color: #fff;
}

//开始时间 结束时间
.timesRang {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// /deep/ .vux-datetime {
//   width: 3.1rem;
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   padding: 0.2rem;
//   background-color: #eeeeee;
//   color: #3d3d3d;
//   margin: 0.1rem 0;
//   font-size: 0.26rem;
//   text-align: center;
//   border-radius: 3px;
// }
/deep/ .weui-cell_access {
  .weui-cell__ft {
    padding-right: 0.8rem;
  }
}
</style>
